<template>
  <div>
    <div>
      <van-nav-bar
          title="充值"
          left-arrow
          @click-left="onClickLeft"
          right-text="充值记录"
          @click-right="gotopuprecord"
      />
    </div>
    <div class="ra">
      <div style="height: 10px"/>
       <span>充值金额</span>
      <div class="group">
        <van-cell-group>
          <van-field type="number" maxlength="7" v-model="money" style="font-size: 15px" placeholder="请输入金额" label="菲律宾索比" @change="onConfirm"/>
        </van-cell-group>
      </div>
    </div>
    <div class="payway">
<!--      <van-cell-->
<!--          readonly-->
<!--          clickable-->
<!--          is-link-->
<!--          style="text-align: left"-->
<!--          :value="value"-->
<!--          title="支付货币"-->
<!--          @click="showPicker = true"-->
<!--      />-->
      <van-cell style="text-align: left" title="支付货币" :value="columns"/>
<!--      <van-popup v-model="showPicker" position="bottom">-->
<!--        <van-picker-->
<!--            show-toolbar-->
<!--            :columns="columns"-->
<!--            @confirm="onConfirm"-->
<!--            @cancel="showPicker = false"-->
<!--        />-->
<!--      </van-popup>-->
      <van-cell style="text-align: left" title="汇率" :value="'1PHP='+rate+'CNY'" value-class="value-class"/>
      <hr color="#E5E5E5" style="margin-top: 10px"/>
      <div style="margin: 30px 0">请选择支付方式</div>
      <div class="way">
        <van-radio-group v-model="radio" class="radio">
          <van-radio class="van-radio" name="1">
            <van-icon color="#44C93FFF" class="van-icon" name="wechat-pay" size="2rem"/>
            <span class="span">微信支付</span>
            <span class="span1">￥{{parseFloat(umoney).toFixed(2)}}</span>
          </van-radio>
          <van-radio class="van-radio" name="2">
            <van-icon color="#08B4FDFF" class="van-icon" name="alipay" size="2rem"/>
            <span class="span">支付宝</span>
            <span class="span1">￥{{parseFloat(umoney).toFixed(2)}}</span>
          </van-radio>
        </van-radio-group>
      </div>
    </div>
    <div style="margin-top: 20px">
      <van-button type="info" round  size="large" style="width: 90%;margin-top: 30px" @click="gopay">去支付</van-button>
    </div>
    <van-dialog v-model="show" title="微信支付" show-cancel-button>
      <qr-code-component :text="data.url" />
    </van-dialog>
  </div>
</template>

<script>
import axios from "axios";
import QrCodeComponent from './wxQRcode.vue'
import * as $ from "@/utils/request";

export default {
  components: {
    QrCodeComponent
  },
  data() {
    return {
      value: '',
      columns:'人民币',
      showPicker: false,
      radio:'',
      money:0,
      rate:'',
      umoney:0,
      userMsg:{},
      topupMsg:{},
      show:false,
      balance:null,
      data:''
    }
  },
  mounted() {
    if(this.money!=null&&this.money!=''){
      this.umoney=this.money
    }
    let parse = JSON.parse(localStorage.getItem('login'));
    if(parse!=null&&parse!=''){
      this.userMsg=parse;
    }
    this.getExchange()
    this.getExpressDetail(parse.registerIp)
  },
  methods: {
    //监听订单状态
    countDown(orderId){
      var interval = setInterval(()=> {
        //定时器,每3秒执行一次
        $.post("http://localhost:11219/mine/topup/checkWx/"+orderId).then(res=>{
          if((this.show==false)){
            clearInterval(interval);
          }
          if (res.data == 'SUCCESS'|| res.data == 'PAYERROR') {
            clearInterval(interval);
            if(res.data == 'SUCCESS'){
              this.$router.push({
                path: '/topuphint',
                query:{
                  orderId:orderId
                }
              })
              this.show=false
              this.value = ''
              this.radio = ''
              this.money = null
            }
            if(res.data == 'PAYERROR'){
              this.$toast("充值失败")
              this.show=false
            }
          }
        });
      }, 3000);
    },
    getExpressDetail(id){
      axios.get('http://localhost:11219/mine/topup/getexpressdetail/'+id).then(res=>{
          this.balance=res.data.accountBalance
      })
    },
    // 跳转到我的钱包页面
    onClickLeft() {
      this.$router.push({
        path: '/mywallet'
      })
    },
    // 跳转到充值记录页面
    gotopuprecord(){
      this.$router.push({
        path: '/topuprecord'
      })
    },
    // 查询汇率
    getExchange(){
      axios.get('http://localhost:11219/mine/topup/getexchange').then(res=>{
        this.rate=res.data.referenceRate
      })
    },
    // 判断支付货币
    onConfirm() {
      this.value = "人民币";
      this.showPicker = false;
      this.umoney=this.money*this.rate
      this.topupMsg.rechargeCurrency=2
    },
    // 发送支付请求
    gopay(){
      console.log(this.userMsg)
      this.topupMsg.type=this.userMsg.isVip;
      this.topupMsg.phone=this.userMsg.phone;
      this.topupMsg.rechargeChannels=this.radio
      this.topupMsg.rechargeAmount=this.money
      this.topupMsg.balanceAfterRecharging=this.balance+Number(this.umoney)
      this.topupMsg.actualPayment=this.umoney.toFixed(2)
      this.topupMsg.exchangeRate=this.rate
      this.topupMsg.registerIp=this.userMsg.registerIp
      console.log(this.topupMsg)
      // 调用支付接口
      console.log(this.money)
      if(this.money==null||this.money=='') {
        this.$toast('请输入充值金额');
      }else if(this.money<1){
        this.$toast('充值金额不得小于1索比');
      }else {
        axios.post('http://localhost:11219/mine/topup/addtopup', this.topupMsg).then(res => {
          if(res.data.code == 500){
            this.$toast(res.data.message);
          }
          if (res.data.code == 200) {
            let id = res.data.data
          if (this.radio == null || this.radio == '') {
            this.$toast('请选择支付方式');
          } else if (this.radio == 1) {
            console.log("微信支付")
            axios.post('http://localhost:11219/mine/topup/subWx/'+id).then(res => {
              console.log(res)
              this.data=res.data
              this.show = true
              this.countDown(this.data.orderId)
            })
          } else {
            console.log("支付宝支付")
              axios.get('http://localhost:11219/mine/topup/alipay/' + id).then(res => {
                this.$router.push({
                  path: '/alipay',
                  query: {
                    formData: res
                  }
                })
              });
              // console.log(window1)
              // if (window1.closed) {
              //   console.log('付款成功')
              //   this.value = ''
              //   this.radio = ''
              //   this.money = null
              // }
            }
          }
        })
      }
    },
  }
}
</script>

<style scoped>
.ra{
  width: 90%;
  height: 100%;
  background-color: #ffffff;
  margin: 10px 20px;
}
.ra .group{
  width: 100%;
  margin: 20px auto;
}
.payway{
  width: 90%;
  height: 100%;
  margin-left: 20px;
  background-color: white;
}
.van-radio{
  width: 100%;
  height: 60px;
  margin: 20px 0
}
.van-icon{
  margin: 0 5px
}
.span1{
  color: red;
  position: absolute;
  right: 40px;
  margin-top: 8px;
}
.span{
  float: right;
  margin-top: 8px;
}
.way{
  height: 100px;
  margin-left: 10px;
}
.value-class{
  font-size: 12px!important;
  color: red!important;
}
</style>
